<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>来料检验</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="iqc-report">
      <search-btn-view btn-text="来料检验查询" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <sys-common-search request-url="materialSelectFilter/getMaterialSelectData" :request-data="{type:10}" :search="search"
            :search-field="searchField" label-width="auto" input-width="220px">
            <template slot="prepend">
              <el-form-item label="采购类型">
                <el-select clearable v-model="search.type" placeholder="请选择采购类型">
                  <el-option v-for="item in typeList" :key="'type_'+item.value" :value="item.value" :label="item.label" style="width:220px">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template slot="append">
              <el-form-item label="采购单号">
                <el-input clearable placeholder="请输入采购单号" v-model="search.purchaseOrder" style="width:220px">
                </el-input>
              </el-form-item>
              <el-form-item label="采购数量">
                <el-input-number is-decimal-zero v-model="search.purchaseCount" placeholder="请输入采购数量" :controls="false" :min="0" :precision="4"
                  style="width:220px">
                </el-input-number>
              </el-form-item>
              <el-form-item label="采购日期">
                <el-date-picker style="width:135px" v-model="search.startDate" value-format="timestamp" :editable="false"
                  :picker-options="startDateOption"></el-date-picker>
                <span>-</span>
                <el-date-picker style="width:135px" v-model="search.endDate" value-format="timestamp" :editable="false"
                  :picker-options="endDateOption"></el-date-picker>
              </el-form-item>
              <el-form-item label="单价">
                <el-input-number is-decimal-zero v-model="search.startPrice" placeholder="单价最小值" :controls="false" :min="0" :max="search.endPrice"
                  :precision="2" style="width:110px"></el-input-number>
                <span>-</span>
                <el-input-number is-decimal-zero v-model="search.endPrice" placeholder="单价最大值" :controls="false" :precision="2"
                  :min="search.startPrice?search.startPrice:0" style="width:110px"></el-input-number>
            </template>
          </sys-common-search>
        </div>
      </search-btn-view>

      <div class="iqc-report-table-div">
        <el-table fit stripe border :data="materialList" style="width:100%" height="parent">
          <el-table-column :resizable="false" sortable fixed prop="type" key="type" label="采购类型" min-width="90px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('purchaseInWarehouse.type.'+scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable fixed prop="purchaseId" key="purchaseId" label="采购单号" min-width="140px" header-align="center"></el-table-column>
          <el-table-column sortable fixed prop="companyOrderId" key="companyOrderId" label="订单编号" min-width="140px" header-align="center">
          </el-table-column>
          <el-table-column sortable fixed prop="factoryNo" key="factoryNo" label="工厂型号" width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="coustomId" key="coustomId" label="客户型号" width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="providerName" key="providerName" label="供应商" min-width="160px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="materialName" key="materialName" label="物料名称" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="materialType" key="materialType" label="物料类型" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="color" key="color" label="编号" min-width="100px" header-align="center" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="colorDescription" key="colorDescription" label="描述" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="model" label="规格" key="model" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="materialDeptName" label="物料部门" key="materialDeptName" min-width="130px" align="center"></el-table-column>
          <el-table-column sortable prop="providerNo" label="供方编号" key="providerNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="unit" label="采购单位" key="unit" min-width="110px" align="center"></el-table-column>
          <el-table-column sortable prop="unitPrice" label="采购单价" key="unitPrice" min-width="110px" align="center"></el-table-column>
          <el-table-column sortable prop="purchaseCount" label="采购数量" key="purchaseCount" min-width="110px" align="center"></el-table-column>
          <el-table-column sortable prop="countb" label="已检测数" key="countb" min-width="110px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" width="70px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="toReport(scope.row)">检验</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>
    </div>

    <el-dialog fullscreen class="dialog-fullscreen" title="来料检验报告单" :visible.sync="openDialog" :close-on-click-modal="false" @closed="dialogClosed">
      <div style="height:100%;overflow:auto">
        <iqc-report-form v-if="openDialog" type="add" :material="selectMaterial" @save-success="saveSuccess"></iqc-report-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "./css/iqcReportForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>

<script src="../models/iqcReportModel.js"></script>
<script src="./iqcReportForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',

    mixins: [
      tablePaginationMixin(),
      datePickerOptionsMixin('startDate', 'endDate')
    ],

    data: function () {
      var search = {
        purchaseOrder: '',
        materialName: '',
        materialType: '',
        model: '',
        color: '',
        providerName: '',
        providerNo: '',
        orderId: '',
        factoryNo: '',
        customerNo: '',
        companyOrderId: '',
        startDate: null,
        endDate: null,
        type: '',
        purchaseCount: undefined,
        startPrice: undefined,
        endPrice: undefined
      };
      return {
        loading: false,
        materialList: [],
        selectMaterial: null,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        typeList: i18n.getDropDown('purchaseInWarehouse.type', [1, 2]),
        searchField: ['materialName', 'materialType', 'model', 'color', 'providerName', 'providerNo', 'orderId', 'companyOrderId',
          'factoryNo', 'customerNo'
        ],
        openDialog: false
      };
    },

    created: function () {
      this.setMaterialList(true);
    },

    methods: {
      setMaterialList: function (isSearch) {
        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        }
        var fields = ['customerNo', 'orderId', 'companyOrderId', 'purchaseOrder', 'factoryNo', 'materialName', 'model', 'color', 'providerName',
          'providerNo', 'type', 'purchaseCount', 'materialType', 'startPrice', 'endPrice'
        ];
        SysUtil.setPostData(postData, search, fields);

        var startDate = search.startDate;
        if (startDate !== null) {
          postData.purchaseStartTime = moment(startDate).format('YYYY-MM-DD');
        }

        var endDate = search.endDate;
        if (endDate !== null) {
          postData.purchaseEndTime = moment(endDate).format('YYYY-MM-DD');
        }

        this.loading = true;
        var self = this;
        ajaxRequest('materialCheckType/getNeedQcMaterial', postData, false).then(function (res) {
          var materialList = res.returnData;
          if (materialList === undefined) {
            var info = res.info;
            if (info) {
              self.$alert(info, '信息');
              self.loading = false;
              return;
            }
          }

          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          for (var i = 0; i < materialList.length; i++) {
            var material = materialList[i];
            SysUtil.tableSetDeptData(material);
          }

          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      toReport: function (material) {
        this.selectMaterial = material;
        this.openDialog = true;
      },

      saveSuccess: function () {
        this.openDialog = false;
        this.setMaterialList();
      },

      dialogClosed: function () {
        this.selectMaterial = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SysCommonSearch: SysCommonSearch,
      IqcReportForm: IqcReportForm
    }
  });

</script>

<style>
  .iqc-report {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .iqc-report .iqc-report-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
